import { Card, Col, Row } from 'antd';

import React, { Suspense } from 'react';

import ReactEcharts from 'echarts-for-react';

const styles = {
  mainTitle: {
    fontSize: 20,
    color: 'black',
    textAlign: 'left',
  },
  subTitle: {
    fontSize: 16,
    color: 'gray',
    textAlign: 'center',
  },
};

const LineNameChart = ({
  loading,
  productNamePieData,
  clientAppIdPieData,
  reqCostBarData,
  reqTimeBarData,
}) => {
  const stateOne = {
    option: {
      title: {
        zlevel: 0,
        show: true,
        text: ['{name|全部}', `{value|${productNamePieData.productNameTotal}个}`].join('\n'),
        top: 80,
        left: 180,
        textAlign: 'center',
        rich: {
          value: {
            fontSize: 25,
            fontWeight: 'bold',
            lineHeight: 25,
          },
          name: {
            fontSize: 25,
            fontWeight: 'bold',
            lineHeight: 30,
          },
        },
        textStyle: {
          rich: {
            value: {
              fontSize: 25,
              lineHeight: 25,
            },
            name: {
              fontSize: 15,
              lineHeight: 30,
            },
          },
        },
      },
      /* color:['#0099FF','#00CCFF','#00FFFF','#00FFCC','#FA8072','#FF9900','#CC00FF','#FF00CC','#FF6EB4','#DDA0DD','#AB82FF','#836FFF','#6CA6CD'], */
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 350,
        height: 350,
        data: productNamePieData.lineNames,
        itemWidth: 10,
        itemHeight: 10,
        selectedMode: false,
        width: 100, // 宽度
        formatter(name) {
          let legenTitle = `${name.length > 15 ? `${name.slice(0, 15)}...` : name}- `;
          productNamePieData.charts.forEach(function (item) {
            if (name === item.name) {
              legenTitle += item.value;
              legenTitle += `个 (${
                Math.round((item.value / productNamePieData.productNameTotal) * 10000) / 100
              }%)`;
            }
          });
          return legenTitle;
        },
      },
      series: [
        {
          name: '各产线报警占比',
          type: 'pie',
          radius: ['40%', '50%'],
          center: ['30%', '30%'], // 图的位置，距离左跟上的位置
          stillShowZeroSum: false,
          avoidLabelOverlap: false,
          textAlign: 'center',
          zlevel: 1,
          label: {
            normal: {
              // 此处重点，设置为显示
              show: false,
              position: 'center',
              formatter: '{b}\n{c}个',
              align: 'center',
              verticalAlign: 'middle',
              rich: {
                value: {
                  fontSize: 25,
                  fontWeight: 'bold',
                  lineHeight: 25,
                },
                name: {
                  lineHeight: 30,
                },
              },
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: '18',
                fontWeight: 'bold',
              },
            },
          },
          data: productNamePieData.charts,
        },
      ],
    },
  };

  const stateTwo = {
    option: {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个 ({d}%)',
      },
      legend: {
        orient: 'vertical',
        itemWidth: 10,
        itemHeight: 10,
        left: 370,
        height: 350,
        data: clientAppIdPieData.clientAppIds,
        textStyle: {
          width: 270,
        },
        formatter(name) {
          let legenTitle = `${name.length > 15 ? `${name.slice(0, 15)}...` : name}- `;
          clientAppIdPieData.charts.forEach(function (item) {
            if (name === item.name) {
              legenTitle += item.value;
              legenTitle += `个 (${
                Math.round((item.value / clientAppIdPieData.clientAppIdTotal) * 10000) / 100
              }%)`;
            }
          });
          return legenTitle;
        },
      },
      series: [
        {
          name: '各客户警报占比',
          type: 'pie', // 数据统计图的类型
          // 放置要展示的数据
          radius: '50%',
          center: ['30%', '30%'], // 图的位置，距离左跟上的位置
          data: clientAppIdPieData.charts,
          itemStyle: {
            normal: {
              label: {
                show: false, // 隐藏标示文字
              },
              labelLine: {
                show: false, // 隐藏标示线
              },
            },
          },
        },
      ],
    },
  };

  const stateThree = {
    option: {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        data: reqTimeBarData.reqTimeTypes,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      yAxis: {
        type: 'value',
      },
      xAxis: {
        type: 'category',
        data: reqTimeBarData.reqTimes,
      },
      series: [
        {
          name: '耗时告警',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'insideRight',
          },
          data: reqTimeBarData.reqTimeCosts,
        },
        {
          name: '健康检查告警',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'insideRight',
          },
          data: reqTimeBarData.reqTimeHealths,
        },
        {
          name: '后台服务告警',
          type: 'bar',
          stack: '总量',
          label: {
            show: true,
            position: 'insideRight',
          },
          data: reqTimeBarData.reqTimeServers,
        },
      ],
    },
  };

  const stateFour = {
    option: {
      tooltip: {
        trigger: 'axis',
        formatter(obj) {
          let legenTile = `${obj[0].axisValue}<br/> `;
          legenTile += obj[0].data;
          legenTile += `个  (${Math.round((obj[0].data / reqCostBarData.count) * 10000) / 100}%)`;
          return legenTile;
        },
      },
      xAxis: {
        type: 'category',
        data: reqCostBarData.reqCosts,
        axisTick: {
          alignWithLabel: true,
        },
        // 设置字体倾斜
        axisLabel: {
          interval: 0,
          rotate: 45, // 倾斜度 -90 至 90 默认为0
          margin: 10,
          textStyle: {
            fontWeight: 'bolder',
            color: '#000000',
          },
        },
      },
      yAxis: {
        type: 'value',
      },
      grid: {
        // 控制图的大小，调整下面这些值就可以，
        x: 40,
        x2: 100,
        y2: 90, // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
      },
      series: [
        {
          data: reqCostBarData.sizes,
          type: 'line',
        },
      ],
    },
  };

  return (
    <>
      <Row
        gutter={24}
        style={{
          marginTop: 24,
        }}
      >
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              loading={loading}
              className={styles.salesCard}
              bordered={false}
              style={{
                height: '450px',
              }}
            >
              <div>
                <div style={{ marginBottom: '30px' }}>
                  <h3 className="main-title" style={styles.mainTitle}>
                    各产线警报占比
                  </h3>
                </div>
                <ReactEcharts
                  option={stateOne.option}
                  style={{ height: '400px', width: '600px' }}
                />
              </div>
            </Card>
          </Suspense>
        </Col>
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              loading={loading}
              className={styles.salesCard}
              bordered={false}
              style={{
                height: '450px',
              }}
            >
              <div>
                <div style={{ marginBottom: '30px' }}>
                  <h3 className="main-title" style={styles.mainTitle}>
                    各客户警报占比
                  </h3>
                </div>
                <ReactEcharts
                  option={stateTwo.option}
                  style={{ height: '400px', width: '600px' }}
                />
              </div>
            </Card>
          </Suspense>
        </Col>
      </Row>
      <Row
        gutter={24}
        style={{
          marginTop: 24,
        }}
      >
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              loading={loading}
              className={styles.salesCard}
              bordered={false}
              style={{
                height: '550px',
              }}
            >
              <div>
                <div style={{ marginBottom: '30px' }}>
                  <h3 className="main-title" style={styles.mainTitle}>
                    各时间警报占比
                  </h3>
                </div>
                <ReactEcharts
                  option={stateThree.option}
                  style={{ height: '500px', width: '600px' }}
                />
              </div>
            </Card>
          </Suspense>
        </Col>
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              loading={loading}
              className={styles.salesCard}
              bordered={false}
              style={{
                height: '550px',
              }}
            >
              <div>
                <div style={{ marginBottom: '30px' }}>
                  <h3 className="main-title" style={styles.mainTitle}>
                    各耗时警报占比
                  </h3>
                </div>
                <ReactEcharts
                  option={stateFour.option}
                  style={{ height: '500px', width: '600px' }}
                />
              </div>
            </Card>
          </Suspense>
        </Col>
      </Row>
    </>
  );
};

export default LineNameChart;
